<template>
    <div class="content">
        <div class="title-item">
            <span>库存统计</span>
        </div>
        <div class="statistics">
            <div class="block" v-for="(item,index) in inventory " :key="index">
                <van-row type="flex" justify="space-between">
<!--                    <van-col span="7"  class="row">-->
<!--                        <van-row style="display: flex;align-items: center">-->
<!--                            <van-col span="10" style="">-->
<!--                                <div class="fount">{{item.type}}</div>-->
<!--                            </van-col>-->
<!--                          -->
<!--                       </van-row>-->
<!--                    </van-col>-->
                    <van-col span="3" class="row inventoryImg">
                        <img :src="item.img" alt="">
                    </van-col>
                    <van-col span="4" class="row"><div class="fount">企业库存</div><div class="fount1">{{item.amount}}(吨)</div></van-col>
                    <van-col span="5" class="row"><div class="fount">政府储备</div><div class="fount1">{{item.gov_reserves}}(吨)</div></van-col>
                    <van-col span="5" class="row"><div class="fount">总量</div><div class="fount1">{{item.all_amount}}(吨)</div></van-col>
                    <van-col span="5" class="row"><div class="fount">预计可用</div><div class="fount1">{{item.available}}(天)</div></van-col>
                </van-row>
            </div>
         </div>
        <div class="title-item">
            <span>米面油</span>
        </div>
        <div class="chart-div">
            <div id="mmy" class="chart-item"></div>
            <div id="mf" class="chart-item"></div>
            <div id="dy" class="chart-item"></div>
            <div class="divider"></div>
        </div>
        <div class="title-item">
            <span>蔬菜</span>
        </div>
        <div class="chart-div">
            <div id="sc" class="chart-item1"></div>
            <div class="divider"></div>
        </div>
        <div class="title-item">
            <span>肉蛋奶</span>
        </div>
        <div class="chart-div">
            <div id="rou" class="chart-item"></div>
            <div id="nai" class="chart-item"></div>
            <div id="yan" class="chart-item2"></div>
            <div class="divider"></div>
        </div>
    </div>
</template>

<script>
import echarts from 'echarts'
import { Dialog } from 'vant'
import * as ds from '@/api/livelihoodp-prices/index'
export default {
  name: 'index',
  data () {
    return {
      list: [],
      // 库存
      inventory: [],
      salt: 0,
      sugar: 0,
      meat: [],
      egg: [],
      imgUrl: [
        {
          name: '油',
          url: 'http://city-card.oss-cn-hangzhou.aliyuncs.com/big-screen/icon-mobel/2171585121614_.pic_hd.png'
        },
        {
          name: '大米',
          url: 'http://city-card.oss-cn-hangzhou.aliyuncs.com/big-screen/icon-mobel/2181585121614_.pic_hd.png'
        },
        {
          name: '蛋类',
          url: 'http://city-card.oss-cn-hangzhou.aliyuncs.com/big-screen/icon-mobel/2191585121615_.pic_hd.png'
        },
        {
          name: '火腿肠',
          url: 'http://city-card.oss-cn-hangzhou.aliyuncs.com/big-screen/icon-mobel/2201585121616_.pic_hd.png'
        },
        {
          name: '鸡肉',
          url: 'http://city-card.oss-cn-hangzhou.aliyuncs.com/big-screen/icon-mobel/2211585121617_.pic_hd.png'
        },
        {
          name: '牛肉、羊肉',
          url: 'http://city-card.oss-cn-hangzhou.aliyuncs.com/big-screen/icon-mobel/2221585121618_.pic_hd.png'
        },
        {
          name: '粮食',
          url: 'http://city-card.oss-cn-hangzhou.aliyuncs.com/big-screen/icon-mobel/2231585121619_.pic_hd.png'
        },
        {
          name: '面粉',
          url: 'http://city-card.oss-cn-hangzhou.aliyuncs.com/big-screen/icon-mobel/2241585121620_.pic_hd.png'
        },
        {
          name: '牛奶',
          url: 'http://city-card.oss-cn-hangzhou.aliyuncs.com/big-screen/icon-mobel/2251585121621_.pic_hd.png'
        },
        {
          name: '肉类',
          url: 'http://city-card.oss-cn-hangzhou.aliyuncs.com/big-screen/icon-mobel/2261585121622_.pic_hd.png'
        },
        {
          name: '猪肉',
          url: 'http://city-card.oss-cn-hangzhou.aliyuncs.com/big-screen/icon-mobel/2271585121623_.pic_hd.png'
        },
        {
          name: '蔬菜',
          url: 'http://city-card.oss-cn-hangzhou.aliyuncs.com/big-screen/icon-mobel/2281585121624_.pic_hd.png'
        },
        {
          name: '食盐',
          url: 'http://city-card.oss-cn-hangzhou.aliyuncs.com/big-screen/icon-mobel/2291585121625_.pic_hd.png'
        },
        {
          name: '水产品',
          url: 'http://city-card.oss-cn-hangzhou.aliyuncs.com/big-screen/icon-mobel/2301585121626_.pic_hd.png'
        },
        {
          name: '水果',
          url: 'http://city-card.oss-cn-hangzhou.aliyuncs.com/big-screen/icon-mobel/2321585139178_.pic_hd.jpg'
        },
        {
          name: '食用油',
          url: 'http://city-card.oss-cn-hangzhou.aliyuncs.com/big-screen/icon-mobel/2331585139179_.pic_hd.jpg'
        }

      ]
    }
  },
  methods: {
    mmy (data) {
      let xDate = []; let price = []
      data.forEach(item => {
        xDate.push(item.md)
        price.push(item.price)
      })
      let myChart = echarts.init(document.getElementById('mmy'))
      // 指定图表的配置项和数据

      let option = {
        legend: {
          bottom: 10,
          left: 'center',
          data: ['大米']
        },
        grid: {
          right: '5%',
          top: '8%'
        },
        tooltip: { trigger: 'axis' },
        xAxis: {
          type: 'category',
          data: xDate
        },
        yAxis: {},
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
          {
            type: 'bar',
            data: price,
            color: '#67e0e3'
          }
        ]
      }

      // 使用刚指定的配置项和数据显示图表
      myChart.setOption(option)
    },
    mf (data) {
      let xDate = []; let price = []; let price2 = []
      data.forEach(item => {
        if (!xDate.includes(item.md)) { xDate.push(item.md) }
        item.category === '上白粉' ? price.push(item.price) : price2.push(item.price)
      })
      let myChart = echarts.init(document.getElementById('mf'))
      // 指定图表的配置项和数据
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        grid: {
          left: '8%',
          right: '8%',
          top: '8%'
        },
        legend: {
          bottom: 10,
          left: 'center',
          data: ['上白粉', '精粉']
        },
        xAxis: [
          {
            type: 'category',
            data: xDate,
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            min: 0,
            max: 15,
            interval: 5,
            axisLabel: {
              formatter: '{value}'
            }
          },
          {
            type: 'value',
            min: 15,
            max: 0,
            interval: 5,
            axisLabel: {
              formatter: '{value}'
            }
          }
        ],
        series: [
          {
            name: '上白粉',
            type: 'line',
            data: price
          },
          {
            name: '精粉',
            type: 'line',
            yAxisIndex: 1,
            data: price2
          }
        ]
      }

      // 使用刚指定的配置项和数据显示图表
      myChart.setOption(option)
    },
    dy (data) {
      let xDate = []; let price = []
      data.forEach(item => {
        xDate.push(item.md)
        price.push(item.price)
      })
      let myChart = echarts.init(document.getElementById('dy'))
      // 指定图表的配置项和数据

      let option = {
        legend: {
          bottom: 10,
          left: 'center',
          data: ['豆油']
        },
        grid: {
          right: '5%',
          top: '8%'
        },
        tooltip: { trigger: 'axis' },
        xAxis: {
          type: 'category',
          data: xDate
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          name: '豆油',
          data: price,
          type: 'line',
          symbol: 'triangle',
          symbolSize: 20,
          lineStyle: {
            color: 'green',
            width: 4,
            type: 'dashed'
          },
          itemStyle: {
            borderWidth: 3,
            borderColor: 'yellow',
            color: 'blue'
          }
        }]
      }

      // 使用刚指定的配置项和数据显示图表
      myChart.setOption(option)
    },
    sc (data) {
      let price = []
      data.forEach(item => {
        price.push({ value: item.price, name: item.category })
      })
      let myChart = echarts.init(document.getElementById('sc'))
      // 指定图表的配置项和数据

      let option = {
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            type: 'funnel',
            left: '5%',
            height: 310,
            top: 20,
            // x2: 80,
            width: '90%',
            // height: {totalHeight} - y - y2,
            gap: 2,
            label: {
              show: true,
              position: 'inside'
            },
            labelLine: {
              length: 10,
              lineStyle: {
                width: 1,
                type: 'solid'
              }
            },
            itemStyle: {
              borderColor: '#fff',
              borderWidth: 1
            },
            emphasis: {
              label: {
                fontSize: 20
              }
            },
            data: price
          }
        ]
      }
      // 使用刚指定的配置项和数据显示图表
      myChart.setOption(option)
    },
    rou () {
      let meat = this.meat; let egg = this.egg; let angleArr = []; let seriesArr = []
      meat.forEach(item => {
        angleArr.push(item.category)
        seriesArr.push(item.price)
      })
      egg.forEach(item => {
        angleArr.push(item.category)
        seriesArr.push(item.price)
      })
      let myChart = echarts.init(document.getElementById('rou'))
      // 指定图表的配置项和数据
      let option = {
        tooltip: { trigger: 'axis' },
        angleAxis: {
          type: 'category',
          data: angleArr
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        radiusAxis: {
        },
        polar: {
        },
        series: [{
          type: 'bar',
          label: {
            show: true,
            position: 'top',
            color: ['#090909']
          },
          data: seriesArr,
          coordinateSystem: 'polar',
          stack: 'a'
        }]
      }

      // 使用刚指定的配置项和数据显示图表
      myChart.setOption(option)
    },
    nai (data) {
      let xDate = []; let price = []
      data.forEach(item => {
        xDate.push(item.md)
        price.push(item.price)
      })
      let myChart = echarts.init(document.getElementById('nai'))
      // 指定图表的配置项和数据

      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        grid: {
          left: '8%',
          right: '8%',
          top: '8%'
        },
        legend: {
          bottom: 10,
          left: 'center',
          data: ['鲜奶']
        },
        xAxis: [
          {
            type: 'category',
            data: xDate,
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            min: 0,
            max: 15,
            interval: 5,
            axisLabel: {
              formatter: '{value}'
            }
          },
          {
            type: 'value',
            min: 15,
            max: 0,
            interval: 5,
            axisLabel: {
              formatter: '{value}'
            }
          }
        ],
        series: [
          {
            name: '鲜奶',
            type: 'line',
            yAxisIndex: 1,
            data: price
          }
        ]
      }

      // 使用刚指定的配置项和数据显示图表
      myChart.setOption(option)
    },
    yan () {
      let salt = this.salt
      let sugar = this.sugar
      let myChart = echarts.init(document.getElementById('yan'))
      // 指定图表的配置项和数据
      let option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          bottom: 20,
          left: 'center',
          data: ['食盐', '食糖']
        },
        color: [ '#67e0e3', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293' ],
        series: [
          {
            type: 'pie',
            radius: ['38%', '50%'],
            label: {
              formatter: '{abg|}\n{hr|}\n  {b|{b}：}{c}  ',
              rich: {
                hr: {
                  borderColor: '#aaa',
                  width: '100%',
                  height: 0
                },
                b: {
                  fontSize: 12,
                  lineHeight: 33
                }
              }
            },
            top: -30,
            data: [
              { value: salt, name: '食盐' },
              { value: sugar, name: '食糖' }
            ]
          }
        ]
      }

      // 使用刚指定的配置项和数据显示图表
      myChart.setOption(option)
    },
    getData () {
      // 库存
      ds.shbxgkList().then(({ data }) => {
        let { errcode, data: res, errmsg } = data
        if (errcode === 0) {
          let arr = []
          let imgurl = this.imgUrl
          res.forEach(item => {
            let url = { img: '' }
            imgurl.forEach(n => {
              if (item.type === n.name) {
                url.img = n.url
              }
            })
            arr.push(Object.assign({}, item, url))
          })
          this.inventory = arr
          console.log(this.inventory)
        } else {
          Dialog.alert({
            message: errmsg
          })
        }
      })
      // 米
      ds.mrjgmList().then(({ data }) => {
        let { errcode, data: res, errmsg } = data
        if (errcode === 0) {
          this.mmy(res)
        } else {
          Dialog.alert({
            message: errmsg
          })
        }
      })
      // 面
      ds.mrjgmmList().then(({ data }) => {
        let { errcode, data: res, errmsg } = data
        if (errcode === 0) {
          this.mf(res)
        } else {
          Dialog.alert({
            message: errmsg
          })
        }
      })
      // 油
      ds.mrjgyList().then(({ data }) => {
        let { errcode, data: res, errmsg } = data
        if (errcode === 0) {
          this.dy(res)
        } else {
          Dialog.alert({
            message: errmsg
          })
        }
      })
      // 蔬菜
      ds.mrjgscList().then(({ data }) => {
        let { errcode, data: res, errmsg } = data
        if (errcode === 0) {
          this.sc(res)
        } else {
          Dialog.alert({
            message: errmsg
          })
        }
      })
      // 牛奶
      ds.mrjgnList().then(({ data }) => {
        let { errcode, data: res, errmsg } = data
        if (errcode === 0) {
          this.nai(res)
        } else {
          Dialog.alert({
            message: errmsg
          })
        }
      })
      // 蛋
      ds.ds51List().then(({ data }) => {
        let { errcode, data: res, errmsg } = data
        if (errcode === 0) {
          this.egg = res
          this.rou()
        } else {
          Dialog.alert({
            message: errmsg
          })
        }
      })
      // 肉
      ds.ds55List().then(({ data }) => {
        let { errcode, data: res, errmsg } = data
        if (errcode === 0) {
          this.meat = res
          this.rou()
        } else {
          Dialog.alert({
            message: errmsg
          })
        }
      })
      // 糖
      ds.mrjgtList().then(({ data }) => {
        let { errcode, data: res, errmsg } = data
        if (errcode === 0) {
          this.sugar = res[0].price
          this.yan()
        } else {
          Dialog.alert({
            message: errmsg
          })
        }
      })
      // 盐
      ds.syyList().then(({ data }) => {
        let { errcode, data: res, errmsg } = data
        if (errcode === 0) {
          this.salt = res[0].price
          this.yan()
        } else {
          Dialog.alert({
            message: errmsg
          })
        }
      })
    }
  },
  mounted () {
    this.getData()
  }
}
</script>

<style scoped>
    .content{
        background-color: #efefef;
    }
    .title-item{
        padding: 10px;
        font-size: 14px;
        color: #333333;
    }
    .chart-item{
        width: 100%;
        height: 240px;
    }
    .chart-item1{
        width: 100%;
        height: 300px;
    }
    .chart-item2{
        width: 100%;
        height: 200px;
    }
    .title-item span{
        border-left: 5px solid #8b0000;
        padding-left: 5px;
    }
    .statistics{
        margin-left: 7px;
        margin-right: 7px;
        background-color: #ffffff;
        padding: 10px;
    }
    .inventoryImg{
        display: flex;
        align-items: center;
    }
    .inventoryImg img {
        margin: auto;
        width: 90%;
    }
    .fount{
        font-size: 10px;
        margin-top: 5px;
        text-align: center;
    }
    .fount1{
        font-size: 10px;
        margin-top: 8px;
        color: red;
        text-align: center;
    }
    .row{
        margin-top: 5px;
        border-top: 1px black solid;
    }
    .picture{
        margin-top: 10px;
    }
    .chart-div{
        padding: 0 10px;
    }
    .chart-div .chart-item2,.chart-div .chart-item1,.chart-div .chart-item,.chart-div .table-item{
        background-color: #ffffff;
    }
    .divider{
        width: 100%;
        height: 5px;
        background-color: rgb(204, 204, 204);
        margin-top: 10px;
    }
    .chart-div .van-col--12{
        padding: 0;
    }
</style>
